import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
	state = {
		msgList:[
			{id:'001',name:'消息1',content:'你好，中国'},
			{id:'002',name:'消息2',content:'你好，北京'},
			{id:'003',name:'消息3',content:'你好，尚硅谷'},
		]
	}
	render() {
		return (
			<div>
				<ul>
					{
						this.state.msgList.map((msgObj)=>{
							return (
								<li key={msgObj.id}>
									{/* 跳转时传递search参数，search参数也是路径的一部分，但用?做分割 */}
									<Link to={`/home/message/detail?id=${msgObj.id}&name=${msgObj.name}&content=${msgObj.content}`}>{msgObj.name}</Link>
								</li>
							)
						})
					}
				</ul>
				<hr/>
				{/* search参数无需声明接收，直接正常注册路由即可 */}
				<Route path="/home/message/detail" component={Detail}/>
			</div>
		)
	}
}
